<template>
    <div>
        <div class="crumb" v-if="breadList.length>0">
            <a-breadcrumb class="path">
                <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
                    <span>{{ item.meta.title }}</span> /
                </a-breadcrumb-item>
            </a-breadcrumb>
            <div class="local">
                <div class="localName">{{ $route.meta.title }}</div>
            </div>
        </div>
        <div v-else style="width: 100%; height: 24px;"></div>
    </div>
</template>

<script>
    export default {
        name: 'crumb',
        data() {
            return {
                showAdd: false,
                breadList: []
            }
        },
        watch: {
            $route() {
                this.getCrumb()
            }
        },
        mounted() {
            this.getCrumb()
        },
        computed: {
            menuList () {
                return this.$store.state.common.menuList
            },
        },
        methods: {
            getCrumb() {
                this.breadList = []
                this.name = this.$route.name
                if(this.$route.meta.key){
                    let indexDot = this.$route.meta.key.lastIndexOf('.')
                    let curent = this.$route.meta.key.substr(0, indexDot)
                    if(curent === '0'){
                        curent = '1'
                    }
                    this.breadList = this.menuList.filter(item=>{return item.key === curent})
                }else{
                    this.$router.push ({
                        name: 'sysInit'
                    })
                }
            },
        }
    }
</script>
<style lang="less" scoped>
    .crumb {
        width: 100%;
        height: 50px; overflow: hidden;
        line-height: 50px;
        color: #a3a8b4;
    }
    .path {
        color: #a3a8b4;
        display: inline-block;
        float: left;
        div {
            display: inline-block;
            span {
                margin-right: 10px; color: #a3a8b4 !important;
            }
        }
    }
    .localName {
        font-size: 16px;
        color: #464d5b; margin-left: 5px;
    }

    .local {
        float: left;
    }
</style>
